import React from 'react';
import {inject, observer} from 'mobx-react';
// import DevTools from 'mobx-react-devtools'
import { Button, Row, Col, Spin } from 'antd';
import { WeaNewScroll, WeaTop,WeaRightMenu, WeaTab, WeaSearchGroup, WeaInput, WeaSelect, WeaBrowser, WeaAlertPage } from 'ecCom';
import { Form } from 'antd';
import { WeaSwitch } from 'comsMobx'


import PerExchange from './PerExchange';
import { bottomPaginationHeight } from './constants/bottomPaginationHeight';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
@inject('workPlanExchangeStore')
@observer
class MultiExchanges extends React.Component {
    render() {


        const { workPlanExchangeStore } = this.props;
        const {loading} = workPlanExchangeStore;
        return (

            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@xe08eb`}
            //单页测试时用这个height
            // height={document.documentElement.clientHeight - 52 - 47 - bottomPaginationHeight}
            //放入正式系统后时用这个height，因为要多减去e9一级菜单的高度
            // height={document.documentElement.clientHeight - 52 - 47 - 55 - 10 - bottomPaginationHeight}
            height={this.props.parentRefs&&this.props.parentRefs.state&&this.props.parentRefs.state.height ? 
                this.props.parentRefs.state.height - 38 - bottomPaginationHeight
                : document.documentElement.clientHeight - 52 - 47 - 55 - 10 - bottomPaginationHeight}
            >

                {
                    loading ?
                        <div style={{display: 'table', width: '100%', height: document.documentElement.clientHeight - 52 - 47 - 55 - 10 - bottomPaginationHeight }}>
                            <div
                                style={{
                                    display: 'table-cell',
                                    width: '100%',
                                    height: '100%',
                                    textAlign: 'center',
                                    verticalAlign: 'middle'
                                }}
                            >
                                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@cqup42`}></Spin>
                            </div>

                        </div>
                        :
                        <div style={{height:'100%'}}>
                        {
                            workPlanExchangeStore.elements.length > 0 ?
                                workPlanExchangeStore.elements.map(elem => (
                                    <PerExchange ecId={`${this && this.props && this.props.ecId || ''}_PerExchange@rlfa7g@${elem.workplanid}`}
                                        element={elem}
                                    />
                                ))
                                : (<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@4j6yhr`} icon={'icon-coms-blank'}
                                                 iconSize={120}
                                >
                                    <div style = {{color : '#ccc'}}>
                                        {getLabel(83553,'暂无数据')}
                                    </div>
                                </WeaAlertPage>)
                        }
                        </div>
                }
            </WeaNewScroll>



        )

    }
}

export default MultiExchanges;